<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="main-title">欢迎回来</h1>
        <p class="subtitle">{{ currentTime }}</p>
        <div class="quick-stats">
          <span class="stat-item">
            <el-icon><Monitor /></el-icon>
            系统运行正常
          </span>
          <span class="stat-item">
            <el-icon><User /></el-icon>
            {{ statsData[0].number }} 位用户
          </span>
        </div>
      </div>
      <div class="welcome-illustration">
        <el-icon class="welcome-icon"><TrendCharts /></el-icon>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :lg="6" v-for="(stat, index) in statsData" :key="stat.id">
          <div class="stat-card" :style="{ animationDelay: `${index * 0.1}s` }">
            <div class="stat-icon" :class="stat.colorClass">
              <el-icon><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stat.number }}</div>
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-trend" :class="stat.trendClass">
                <el-icon><component :is="stat.trendIcon" /></el-icon>
                <span>{{ stat.trend }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="24" class="main-content">
      <el-col :xs="24" :lg="14">
        <!-- 最近活动 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon class="header-icon"><Clock /></el-icon>
                <span class="header-title">最近活动</span>
              </div>
              <el-button type="primary" size="small" link>
                查看全部
              </el-button>
            </div>
          </template>
          <div class="activity-list">
            <div 
              v-for="activity in recentActivities" 
              :key="activity.id" 
              class="activity-item"
            >
              <div class="activity-icon" :class="activity.typeClass">
                <el-icon><component :is="activity.icon" /></el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.content }}</div>
                <div class="activity-meta">
                  <span class="activity-user">{{ activity.user }}</span>
                  <span class="activity-time">{{ activity.timestamp }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="10">
        <!-- 快速操作 -->
        <el-card class="content-card quick-actions-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon class="header-icon"><Lightning /></el-icon>
                <span class="header-title">快速操作</span>
              </div>
            </div>
          </template>
          <div class="quick-actions">
            <div 
              v-for="action in quickActions" 
              :key="action.id" 
              class="action-item"
              @click="handleQuickAction(action)"
            >
              <div class="action-icon" :class="action.colorClass">
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <div class="action-info">
                <div class="action-title">{{ action.title }}</div>
                <div class="action-desc">{{ action.description }}</div>
              </div>
              <el-icon class="action-arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>

        <!-- 系统状态 -->
        <el-card class="content-card system-status-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon class="header-icon"><Monitor /></el-icon>
                <span class="header-title">系统状态</span>
              </div>
              <div class="status-indicator">
                <span class="status-dot"></span>
                运行正常
              </div>
            </div>
          </template>
          <div class="system-metrics">
            <div class="metric-item">
              <div class="metric-header">
                <span class="metric-label">CPU使用率</span>
                <span class="metric-value">{{ cpuUsage }}%</span>
              </div>
              <el-progress :percentage="cpuUsage" :color="getProgressColor(cpuUsage)" :show-text="false" />
            </div>
            <div class="metric-item">
              <div class="metric-header">
                <span class="metric-label">内存使用率</span>
                <span class="metric-value">{{ memoryUsage }}%</span>
              </div>
              <el-progress :percentage="memoryUsage" :color="getProgressColor(memoryUsage)" :show-text="false" />
            </div>
            <div class="metric-item">
              <div class="metric-header">
                <span class="metric-label">磁盘使用率</span>
                <span class="metric-value">{{ diskUsage }}%</span>
              </div>
              <el-progress :percentage="diskUsage" :color="getProgressColor(diskUsage)" :show-text="false" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { 
  User, Avatar, Monitor, Document, Sunny, PartlyCloudy,
  Clock, Lightning, ArrowRight, TrendCharts, CaretTop, CaretBottom
} from '@element-plus/icons-vue'

const currentTime = ref('')
const cpuUsage = ref(45)
const memoryUsage = ref(62)
const diskUsage = ref(38)

// 统计数据
const statsData = ref([
  {
    id: 1,
    number: '1,234',
    label: '总用户数',
    icon: User,
    colorClass: 'stat-blue',
    trend: '+12.5%',
    trendIcon: CaretTop,
    trendClass: 'trend-up'
  },
  {
    id: 2,
    number: '56',
    label: '角色数量',
    icon: Avatar,
    colorClass: 'stat-green',
    trend: '+3.2%',
    trendIcon: CaretTop,
    trendClass: 'trend-up'
  },
  {
    id: 3,
    number: '12',
    label: '系统模块',
    icon: Monitor,
    colorClass: 'stat-orange',
    trend: '0%',
    trendIcon: CaretBottom,
    trendClass: 'trend-stable'
  },
  {
    id: 4,
    number: '8,456',
    label: '操作日志',
    icon: Document,
    colorClass: 'stat-purple',
    trend: '+18.7%',
    trendIcon: CaretTop,
    trendClass: 'trend-up'
  }
])

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    content: '创建了新的用户账户',
    user: '系统管理员',
    timestamp: '10:30',
    icon: User,
    typeClass: 'activity-primary'
  },
  {
    id: 2,
    content: '修改了角色权限配置',
    user: '张三',
    timestamp: '09:15',
    icon: Avatar,
    typeClass: 'activity-warning'
  },
  {
    id: 3,
    content: '登录了系统',
    user: '李四',
    timestamp: '08:45',
    icon: User,
    typeClass: 'activity-success'
  },
  {
    id: 4,
    content: '更新了个人信息',
    user: '王五',
    timestamp: '昨天',
    icon: User,
    typeClass: 'activity-info'
  }
])

// 快速操作数据
const quickActions = ref([
  {
    id: 1,
    title: '添加用户',
    description: '创建新用户账户',
    icon: User,
    colorClass: 'action-blue',
    route: '/system/users'
  },
  {
    id: 2,
    title: '角色管理',
    description: '配置角色权限',
    icon: Avatar,
    colorClass: 'action-green',
    route: '/system/roles'
  },
  {
    id: 3,
    title: '系统设置',
    description: '修改系统配置',
    icon: Monitor,
    colorClass: 'action-orange',
    route: '/settings'
  },
  {
    id: 4,
    title: '查看日志',
    description: '审查操作记录',
    icon: Document,
    colorClass: 'action-purple',
    route: '/logs'
  }
])

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

const handleQuickAction = (action: any) => {
  console.log('快速操作:', action.title)
  // 这里可以添加路由跳转逻辑
  // router.push(action.route)
}

// 模拟系统指标数据更新
const updateSystemMetrics = () => {
  cpuUsage.value = Math.floor(Math.random() * 30) + 30
  memoryUsage.value = Math.floor(Math.random() * 40) + 40
  diskUsage.value = Math.floor(Math.random() * 20) + 30
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
  
  // 每30秒更新一次系统指标
  setInterval(updateSystemMetrics, 30000)
  
  // 添加页面加载动画
  nextTick(() => {
    const cards = document.querySelectorAll('.stat-card-wrapper')
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.classList.add('animate-in')
      }, index * 100)
    })
  })
})
</script>

<style scoped lang="scss">
.dashboard {
  padding: 24px;
  background: transparent;
  min-height: calc(100vh - 64px);

  // 欢迎区域
  .welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 32px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(50%, -50%);
    }

    .welcome-content {
      flex: 1;
      z-index: 2;

      .main-title {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 8px 0;
        letter-spacing: -0.025em;
      }

      .subtitle {
        font-size: 16px;
        opacity: 0.9;
        margin: 0 0 24px 0;
      }

      .quick-stats {
        display: flex;
        gap: 32px;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          opacity: 0.9;

          .el-icon {
            font-size: 16px;
          }
        }
      }
    }

    .welcome-illustration {
      .welcome-icon {
        font-size: 120px;
        opacity: 0.3;
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 20px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(226, 232, 240, 0.8);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 20px rgba(0, 0, 0, 0.08);
      }

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .el-icon {
          font-size: 24px;
          color: white;
        }

        &.stat-blue {
          background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        }

        &.stat-green {
          background: linear-gradient(135deg, #10b981, #059669);
        }

        &.stat-orange {
          background: linear-gradient(135deg, #f59e0b, #d97706);
        }

        &.stat-purple {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        }
      }

      .stat-content {
        flex: 1;

        .stat-number {
          font-size: 28px;
          font-weight: 700;
          color: #1e293b;
          margin-bottom: 4px;
          line-height: 1;
        }

        .stat-label {
          font-size: 14px;
          color: #64748b;
          margin-bottom: 8px;
        }

        .stat-trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 500;

          .el-icon {
            font-size: 14px;
          }

          &.trend-up {
            color: #10b981;
          }

          &.trend-down {
            color: #ef4444;
          }

          &.trend-stable {
            color: #f59e0b;
          }
        }
      }
    }
  }

  // 主要内容区域
  .main-content {
    .content-card {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .el-card {
        border-radius: 12px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 20px rgba(0, 0, 0, 0.04);

        :deep(.el-card__header) {
          background: #f8fafc;
          border-bottom: 1px solid rgba(226, 232, 240, 0.8);
          padding: 20px 24px;
        }

        :deep(.el-card__body) {
          padding: 24px;
        }
      }
    }

    // 卡片头部
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;

        .header-icon {
          font-size: 18px;
          color: #3b82f6;
        }

        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #1e293b;
        }
      }

      .status-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #10b981;
        font-weight: 500;

        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #10b981;
          animation: pulse 2s infinite;
        }
      }
    }

    // 活动列表
    .activity-list {
      .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid #f1f5f9;

        &:last-child {
          border-bottom: none;
        }

        .activity-icon {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          .el-icon {
            font-size: 14px;
            color: white;
          }

          &.activity-primary {
            background: #3b82f6;
          }

          &.activity-success {
            background: #10b981;
          }

          &.activity-warning {
            background: #f59e0b;
          }

          &.activity-info {
            background: #64748b;
          }
        }

        .activity-content {
          flex: 1;

          .activity-text {
            font-size: 14px;
            color: #1e293b;
            margin-bottom: 4px;
            line-height: 1.4;
          }

          .activity-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: #64748b;

            .activity-user {
              font-weight: 500;
            }

            .activity-time {
              opacity: 0.8;
            }
          }
        }
      }
    }

    // 快速操作
    .quick-actions {
      .action-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        &:hover {
          background: #f8fafc;
          border-color: #e2e8f0;
          transform: translateX(4px);
        }

        .action-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          .el-icon {
            font-size: 18px;
            color: white;
          }

          &.action-blue {
            background: #3b82f6;
          }

          &.action-green {
            background: #10b981;
          }

          &.action-orange {
            background: #f59e0b;
          }

          &.action-purple {
            background: #8b5cf6;
          }
        }

        .action-info {
          flex: 1;

          .action-title {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 2px;
          }

          .action-desc {
            font-size: 12px;
            color: #64748b;
          }
        }

        .action-arrow {
          font-size: 14px;
          color: #cbd5e1;
          transition: all 0.3s ease;
        }

        &:hover .action-arrow {
          color: #64748b;
          transform: translateX(2px);
        }
      }
    }

    // 系统指标
    .system-metrics {
      .metric-item {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .metric-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .metric-label {
            font-size: 14px;
            color: #475569;
            font-weight: 500;
          }

          .metric-value {
            font-size: 14px;
            color: #1e293b;
            font-weight: 600;
          }
        }

        :deep(.el-progress-bar__outer) {
          border-radius: 6px;
          background: #f1f5f9;
        }

        :deep(.el-progress-bar__inner) {
          border-radius: 6px;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 16px;

    .welcome-section {
      padding: 24px;
      flex-direction: column;
      text-align: center;

      .welcome-content {
        .main-title {
          font-size: 24px;
        }

        .quick-stats {
          justify-content: center;
          gap: 24px;
        }
      }

      .welcome-illustration {
        margin-top: 16px;

        .welcome-icon {
          font-size: 80px;
        }
      }
    }

    .stats-section {
      .stat-card {
        padding: 20px;

        .stat-icon {
          width: 48px;
          height: 48px;

          .el-icon {
            font-size: 20px;
          }
        }

        .stat-content {
          .stat-number {
            font-size: 24px;
          }
        }
      }
    }

    .main-content {
      .content-card {
        .el-card {
          :deep(.el-card__header) {
            padding: 16px 20px;
          }

          :deep(.el-card__body) {
            padding: 20px;
          }
        }
      }
    }
  }

  // 动画定义
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
    }
  }
}
</style>